iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0

Commit 000000
本系列文預設會將專案都建立在家目錄(Home)底下的 projects 目錄中,所以可以先透過指令建立起來。

mkdir ~/projects
cd ~/projects

Commit 000001
接下來透過指令去建立起 Nuxt Content 的 Projects。在本系列文在套件管理工具中,也會如準備開發環境所述使用 pnpm 。

# pnpm dlx nuxi@latest init <project name> -t content
pnpm dlx nuxi@latest init my-digital-garden -t content

pnpm dlx 是指從 package registry 中下載 package,但不將其安裝做為專案的相依套件,並直接在入去執行該 package 提供的執行檔。

nuxi 則是 Nuxt CLI,也就是 Nuxt 3 開始使用的命令列介面,透過 init 指令,與 -t <template-name> 參數,去初始化一個 Nuxt Content 2 專案。

初始化互動過程中,會詢問要使用哪套套件管理工具,選了 pnpm 後,該腳本就會協助初始化並且執行安裝套件的指令。

最後就可以透過以下指令在本機中執行 Nuxt Contenxt 的網站啦!

pnpm run dev

成功執行後,就可以透過訪問 localhost:3000 瀏覽初始化的第一個網站啦!

通常到這裡我就會 commit 一版,Git 相關操作就不在這裡贅述了。

Writing
接著執行 Obsidian 並透過 Obsidian 的 Open Vault 視窗,點擊 Open Folder as Vault,選擇剛剛建立的 Nuxt Content 專案底下的 content 目錄 ~/project/my-digital-garden/content

接著我們在這個目錄下任意的編寫 Markdown 檔案,都會按照其路徑去渲染成網頁內容。比如說建立 sandbox/hello.md 並編寫以下內容:

就可以在 localhost:3000/sandbox/hello 中看到其內容了!


上一篇
期待看到的成果
下一篇
將文章與網站的版本控制分離
系列文
用 Nuxt Content 搭配 Obsidian 建立自己的 Digital Garden30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言